import { ElMessage } from 'element-plus'
import { useSettingStore } from '@/stores/setting'
import { getLightColor, getDarkColor } from '@/utils/color'

/**
 * @description 全局主题 hooks
 * */
export const useTheme = () => {
  const settingStore = useSettingStore()

  // 修改主题颜色
  const changePrimary = (val) => {
    if (!val) {
      val = '#409EFF'
      ElMessage({ type: 'success', message: `主题颜色已重置为 ${val}` })
    }
    // 仅客户端
    if (import.meta.client) {
      // 计算主题颜色变化
      document.documentElement.style.setProperty('--el-color-primary', val)
      for (let i = 1; i <= 9; i++) {
        document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, `${getLightColor(val, i / 10)}`)
      }
      for (let i = 1; i <= 9; i++) {
        document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, `${getDarkColor(val, i / 10)}`)
      }
      settingStore.primaryColor = val
    }
  }

  // init theme
  const initTheme = () => {
    changePrimary(settingStore.primaryColor)
  }

  return {
    initTheme,
    changePrimary
  }
}
